<template>
    <el-form @submit.native.prevent ref="formRule" :model="form" :rules="rules">
        <el-form-item prop="name" label="用户名">
            <el-input :disabled="form.isRoot" v-model="form.name" placeholder="请填写用户名"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
            <el-input v-model="form.email" placeholder="请填写邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
            <el-input v-model="form.password" placeholder="请填写密码"></el-input>
        </el-form-item>
        <el-form-item prop="password2" label="确认密码">
            <el-input v-model="form.password2" placeholder="请填写密码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button :loading="isLoading" type="primary" @click="onSubmit('formRule')">确认修改</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import moment from 'moment';
import {putUsers} from '@/api/auth';
import {mapGetters} from 'vuex';
export default {
    name: 'user-dialog',
    props: {
        title: {
            type: String,
            default: '用户'
        },
        visible: {
            type: Boolean,
            default: false
        },
        optionsRoles: {
            type: Array,
            default: () => []
        },
        userinfo: {
            type: Object,
            default: () => ({})
        }
    },
    components: {},
    data() {
        return {
            moment,
            // 新建用户弹窗 提交表单中
            centerDialogLoading: false,
            inputStyle: {width: '320px'},
            // 新建用户表单
            form: {
                id: undefined, // 用户id
                isRoot: false, // 是否为平台管理员
                name: '', // 用户名
                email: '', // 邮箱
                password: '', // 密码
                password2: '', // 确认密码
                remark: '', // 备注
                roleId: [], // 角色ids
                permission: []
            },
            rules: {
                name: [{required: true, message: '请填写用户名', trigger: ['change', 'blur']}],
                email: [
                    // {required: true, message: '请填写邮箱', trigger: ['change', 'blur']},
                    {type: 'email', message: '邮箱格式不正确', trigger: ['change', 'blur']}
                ],
                password: [{required: true, message: '请填写密码', trigger: ['change', 'blur']}],
                password2: [{required: true, message: '请填写确认密码', trigger: ['change', 'blur']}]
            },
            isLoading: false
        };
    },
    computed: {
        ...mapGetters({
            user: 'user/user'
        }),
        isMobile() {
            return this.$store.getters['app/isMobile'];
        }
    },
    watch: {
        userinfo() {
            this.form = {...this.userinfo};
        }
    },

    methods: {
        // 提交用户
        onSubmit(formName) {
            this.$refs[formName].validate(async (valid, fields) => {
                const {_id, name, email, roles, password, password2, remark} = this.form;

                if (valid) {
                    try {
                        this.isLoading = true;
                        const newUser = {
                            _id, // 用户id
                            name, // 用户名
                            email, // 邮箱
                            password, // 密码
                            password2, // 确认密码
                            roles: roles.join(','), // 角色ids
                            remark
                        };

                        const {data: res} = await putUsers(newUser._id, newUser);
                        if (res.status === 204) {
                            // 重新更新数据
                            this.$emit('on-ok');
                        }
                    } catch (error) {
                        this.$message({showClose: true, type: 'error', message: error});
                    } finally {
                        this.isLoading = false;
                    }
                } else {
                    const first = Object.keys(fields)[0];
                    const items = fields[first] || [];
                    const {message} = items[0] || {};
                    this.$message({showClose: true, type: 'error', message});
                }
            });
        }
    }
};
</script>
